<template>
  <div class="cat-detail">
    <div class="container">
      <div class="row mt-5 d-flex flex-column gap-4 justify-content-center adopt">
        <div class="col-12 col-md-12">
          <div class="card mb-4 shadow-sm d-flex flex-column flex-md-row gap-4 border-0"
            style="transition: transform 0.3s ease, opacity 0.3s ease;">
            <img class="adoptImg img-fluid" src="../../assets/images/mm4.jpg" alt="">
            <div class="card-body card-body-mm">
              <div class="d-flex flex-column align-items-left gap-2">
                <h3 class="adopt-name">喵喵</h3>
                <ul class="d-flex flex-column gap-3">
                  <li><span>品种：</span>&nbsp;&nbsp;&nbsp;蓝猫&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw" style="" /></li>
                  <li><span>性别：</span>&nbsp;&nbsp;&nbsp;雄性&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw" style="" /></li>
                  <li><span>年龄：</span>&nbsp;&nbsp;&nbsp;1岁&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw" style="" />
                  </li>
                  <li><span>瞳色：</span>&nbsp;&nbsp;&nbsp;红&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw" style="" /></li>
                  <li><span>毛色：</span>&nbsp;&nbsp;&nbsp;蓝&nbsp;&nbsp;&nbsp;<font-awesome-icon icon="paw" style="" /></li>
                </ul>
                <p class="description">
                  这是一只活泼好动的小猫，名叫小跳。她总是充满好奇心，喜欢探索新环境。小跳特别喜欢追逐玩具和与人互动，非常适合有时间和精力陪伴她的家庭
                </p>
                <div class="adoptBtn" @click="toAdoptInfo">立即收养</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods:{
    // 跳转领养填写页面
    toAdoptInfo(){
      this.$router.push({
        name: 'catadoptInfo',
        params: { id: '123' } // 确保传递了 id 参数
      });
    }
  }
}
</script>

<style>
.adoptImg {
  width: 555px;
  /* min-height: 466px; */
  border-radius: 40px;
}

.adopt .adopt-name {
  font-family: 'Baloo Thambi', sans-serif;
  font-size: 2.5em;
  color: #000;
  line-height: 1em;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}

.adopt ul {
  font-size: 1em;
  line-height: 1.214em;
  text-transform: uppercase;
  font-family: 'Baloo Thambi', sans-serif;
  letter-spacing: -0.4px;
  color: #d8644d;
  font-weight: 800;
  padding-left: 0px;
}
.adopt ul li span{
  color: #333;
}
.adopt p {
  font-size: 16px;
  font-weight: 400;
  color: #989797;
  overflow-x: hidden !important;
  -webkit-font-smoothing: antialiased;
  font-family: 'Lato', sans-serif;
  text-indent: 2rem;
  line-height: 2rem;
}

.adopt .adoptBtn {
  width: 10rem;
  border: 0;
  color: #fff;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  font-family: 'Baloo Thambi', sans-serif;
  font-size: 15px;
  transition: all .3s ease-in-out;
  border-radius: 25px;
  margin-top: 10px;
  letter-spacing: .4rem;
  line-height: 1em;
  padding: 20px 30px;
  text-transform: uppercase;
  background-color: #EF5030;
  box-shadow: inset 9px 0 0 0 #F19F1F;
}

.adopt .adoptBtn:hover {
  background-color: rgba(16, 136, 150, 1);
  animation: shadowMorph 0.9s forwards;
  /* 应用动画 */
}

@keyframes shadowMorph {
  0% {
    box-shadow: inset 9px 0 0 0 #F19F1F;
  }

  100% {
    box-shadow: inset 9px 0 0 0 rgba(16, 136, 150, 1);
  }
}
</style>